<template>
  <div class="a-shop-menu">
    <div class="food-left">
      <div class="food-name"> {{ food.name }}</div>
    </div>
    <div class="food-right">
      <div class="food-money">
        <span class="money-icon">￥</span>
        <span class="money-text"> {{ food.singlePrice }} </span>
      </div>
      <ele-menu-controll
        :count="food.count"
        @countChange="countChange"
      ></ele-menu-controll>
    </div>
  </div>
</template>

<script>
import eleMenuControll from "../select_Button";
import {mapActions} from "vuex"
export default {
  props: {
    food: {
      type: Object,
      default: () => {
        name: "libai1";
      },
    },
  },
  methods: {
    ...mapActions(["changeOrderlist"]),
    // 按钮组件内部发送事件监听
    countChange(V) {
      let _res  = Object.assign({},this.food,{count:V})
      this.changeOrderlist(_res)
    },
  },
  components: {
    eleMenuControll,
  },
};
</script>

<style>
.a-shop-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  height: 48px;
  margin: 0 18px;
}
.food-right {
  margin-right: 96px;
}
.food-money span {
  color: red;
  line-height: 24px;
}
.money-icon {
  font-size: 10px;
  font-weight: normal;
}
.money-text {
  font-size: 14px;
  font-weight: 700;
}
</style>
